<script setup lang="ts">
import { ref, computed } from 'vue';
import { showLoading, hideLoading, getCurrentInstance } from '@tarojs/taro';
import { useNurseInformation } from '@/service';
import { useImage } from '@/hooks';
import { useDayjs } from '@/hooks/common';

const {
    router: {
        params: { id }
    }
}: any = getCurrentInstance();

definePageConfig({
    navigationBarTitleText: '资讯动态详情'
});

const { $dayjs } = useDayjs();

const { queryById } = useNurseInformation();

const data = ref({
    title: '',
    createBy: '',
    createTime: '',
    content: ''
});

getData();

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await queryById(id);

    if (!error && success) {
        const content = replace_img(success.content);
        data.value = { ...success, content };
    }
    hideLoading();
}
function replace_img(content: string) {
    function replacePTagsWithView(htmlString: string) {
        // 正则表达式尝试匹配<p>标签，其中包含一个<img>标签，并且<p>标签没有其他内容
        const regex = /<p>\s*<img([^>]*)>\s*<\/p>/g;
        return htmlString.replaceAll(regex, (match, attrs) => {
            // 构造新的<view>标签，包含原来的<img>标签和它的属性
            return `<view class="content"><img mode="widthFix" ${attrs}></view>`;
        });
    }

    function replaceBetweenSrcAndJeditor(str: string) {
        // 正则表达式匹配从'src'之后到'jeditor'之前的所有内容，但不包括这两个词本身
        // 使用非贪婪匹配（*?）来确保只匹配到第一个'jeditor'
        const regex = /(?<=src=").*?(?=jeditor)/g;
        // 使用空字符串替换匹配到的内容
        return str.replaceAll(regex, useImage(''));
    }
    let replacedStr = replacePTagsWithView(content);

    replacedStr = replaceBetweenSrcAndJeditor(replacedStr);

    return replacedStr;
}
const date = computed(() => {
    if (data.value?.createTime) {
        const now = $dayjs();
        const createTime = $dayjs(data.value?.createTime).from(now);
        return createTime;
    }
    return '';
});

// const showPreview = ref(false)

// const initNo = ref(0)

// const hideFn = () => {
//     showPreview.value = false;
// }
// const clickImages = (imgs: any) => {

//     initNo.value = imgs.index
//     showPreview.value = true;
// }
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="资讯动态详情" showLeft /> -->
        <view class="w-375px flex-col-center mb-4">
            <view class="w-360px flex-col-center">
                <view class="my-2 font-bold text-lg">{{ data?.title }}</view>
                <view class="mb-2 text-blueGray">
                    {{ `${data?.createBy} ${date}` }}
                </view>
                <view v-html="data?.content" class="content"></view>
            </view>
        </view>
    </basic-layout>
</template>
<style lang="scss">
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

img {
    width: 100%;
    height: 300px;
    border-radius: 24rpx;
}

.nut-comment-header {
    display: none;
}

.nut-comment-bottom {
    display: none;
}
</style>
